<template>
  <div class="mapview-main">
    <div id="amap"></div>
  </div>
</template>

<style lang="scss" scoped>
.BMap_cpyCtrl {
  display: none;
}
.mapview-main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("../assets/mapView/map.png") repeat;
  // background: url("../assets/bg.png") repeat;

  .mapview-main-border {
    position: relative;
    top: 0;
    background: url("../assets/bgBorder.png") no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: flex;
  }
}
#amap {
  width: 100%;
  height: 100%;
  .amap-maps {
    background: #fff;
    .amap-layers {
      .amap-markers {
        .amap-marker {
          .amap-marker-label {
            width: 60px;
            font-size: 16px;
            line-height: 18px;
            text-align: center;
            height: 28px;
            font-family: STLiti;
            color: green;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.4);
            border: solid 2px rgba(100, 255, 200, 0.8);
          }
        }
      }
    }
  }
}
</style>
<script>
import BMapGL from "BMapGL";
import "echarts-gl";
import * as echarts from "echarts";
// eslint-disable-next-line no-unused-vars
import { effect, util, mapvgl, mapvglThree } from "vue-mapvgl";
// eslint-disable-next-line no-irregular-whitespace
import { useStore } from "vuex";
export default {
  name: "AMap",
  data() {
    return {
      myChart:null,
      store: useStore(), //此处初始化store对象
      massMarks: {},
    };
  },
  mounted() {
     let canvas = document.getElementById("amap");
    this.myChart = echarts.init(canvas, null, {
            width: 1200,
            height: 1000,
        });
    this.initBMap();
  },
  methods: {
    initBMap() {
      let ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
      let option = {
        backgroundColor: '#000',
        globe: {
          baseTexture: 'http://localhost:8080/img/map.54849384.png',
          // baseTexture: ROOT_PATH + '/data-gl/asset/earth.jpg',
          // heightTexture: ROOT_PATH + '/data-gl/asset/bathymetry_bw_composite_4k.jpg',
          displacementScale: 0,
          shading: 'color',
          // shading: 'realistic',
          realisticMaterial:{
            metalness:0,
          },
          // environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
          light: {
            ambient: {
              intensity: 0.1
            },
            main: {
              intensity: 1.5
            }
          },
          layers: [
            {
              type: 'blend',
              blendTo: 'emission',
              texture: ROOT_PATH + '/data-gl/asset/night.jpg'
            },
            {
              type: 'overlay',
              texture: ROOT_PATH + '/data-gl/asset/clouds.png',
              shading: 'lambert',
              distance: 5
            }
          ]
        }
      }
      this.myChart.setOption(option)
    },
    /**
     * 旋转地图动画
     */
    toFrames() {
      let keyFrames = [
        // 定义关键帧
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 0,
          percentage: 0
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 36,
          percentage: 0.1
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 72,
          percentage: 0.2
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 108,
          percentage: 0.3
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 60,
          heading: 144,
          percentage: 0.4
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 80,
          heading: 180,
          percentage: 0.5
        },
        {
          center: new BMapGL.Point(120.863422, 32.015922),
          zoom: 18,
          tilt: 60,
          heading: 216,
          percentage: 0.6
        }        
      ];
      let opts = {
        duration: 25000, // 花费时间
        delay: 80, // 延迟
        interation: 1 // 循环, 可设置数字为次数
      };
      let animation = new BMapGL.ViewAnimation(keyFrames, opts); // 创建视角动画
      this.map.startViewAnimation(animation); // 开始动画
    }
  }
};
</script>
